window.onload=function(){
   // 模拟的订单详情数据  
var orderDetails = {  
    "11111": {  
        "image": "../images/s1.jpg",  
        "name": "星光璀璨",  
        "price": "¥168.68",  
        "material": "香槟玫瑰9枝、蓝绣球、向日葵、白色洋桔梗、大叶尤加利"  
    } , 
    "22222": {  
        "image": "../images/s2.jpg",  
        "name": "金色暖阳",  
        "price": "¥268.68",  
        "material": "向日葵4枝、香槟玫瑰12枝、辉煌玫瑰8枝等"  
    } , 
    "33333": {  
        "image": "../images/s3.jpg",  
        "name": "砥砺前行",  
        "price": "¥386.68",  
        "material": "碎冰蓝玫瑰33枝"  
    }   
};  
  
// 获取模态窗口和关闭按钮 找对象 
var modal = document.getElementById("order-details-modal");  
var closeBtn = document.getElementsByClassName("close")[0];  
var productImage = document.getElementById("product-image");  
var productName = document.getElementById("product-name");  
var productPrice = document.getElementById("product-price");  
var productMaterial = document.getElementById("product-material");  
// 点击关闭按钮时隐藏模态窗口  
closeBtn.onclick = function() {  
    modal.style.display = "none";  
}   
// 窗口点击事件监听器，点击其他地方时隐藏模态窗口  
window.onclick = function(event) {  
    if (event.target == modal) {  
        modal.style.display = "none";  
    }  
}  
// 为每个“查看详情”按钮添加点击事件监听器  
var btns = document.getElementsByClassName("btn-details");  
for (var i = 0; i < btns.length; i++) {  
    btns[i].addEventListener("click", function() {  
        var orderId = this.getAttribute("data-order-id"); // 获取订单ID  
        showOrderDetails(orderId); // 显示订单详情  
    });  
}  
  
// 显示订单详情的函数  
function showOrderDetails(orderId) {  
    // 检查订单ID是否存在  
    if (orderDetails[orderId]) {  
        var detail = orderDetails[orderId];  
          
        // 设置模态窗口的显示  
        modal.style.display = "block";  
          
        // 填充订单详情  
        productImage.src = detail.image;  
        productName.textContent = detail.name;  
        productPrice.textContent = "价格: " + detail.price;  
        productMaterial.textContent = "材料: " + detail.material;  
    } else {  
        alert("找不到订单详情");  
    }  
}
}